<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{
            width: 100%;
            height: 100%;
        }
        #box1{
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
        }
        img{
            width: 500px;
            height: 350px;
            /* align-self: center; */
        }
        #box2{
            width: 500px;
            /* background-color: antiquewhite; */
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div id="box1">
         <img src="../img/1.jpg" alt="ys" id="img1">
         <br>
         <div id="box2">
            <button id="bt1">自动切换图片</button>
            <button id="btn1">上一张</button>
            <button id="btn2">下一张</button>
            <button id="bt2">停止切换图片</button>
         </div>
         
    </div>
    <script>
        let img = document.getElementById('img1')
        let bt1 = document.getElementById('bt1');
        let bt2 = document.getElementById('bt2');
        let btn1 = document.getElementById('btn1');
        let btn2 = document.getElementById('btn2');

        let img_arr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
        let i = 0;
        var time;
        //开启定时器
        bt1.addEventListener('click',()=>{
            time = setInterval(()=>{
            i++;
            if(i>=img_arr.length){
                i = 0;
            }
            img.src = img_arr[i];
        },1000)
        });
        bt2.addEventListener('click',function(){
            clearInterval(time);
        })

        //上一张
        btn1.onclick = function(){
            i --;
            if(i<0){
                i = img_arr.length -1;
            }
            img.src = img_arr[i];
        }

        //下一张
        btn2.onclick = function(){
            i++;
            if(i>=img_arr.length){
                i = 0;
            }
            img.src = img_arr[i];
        }
      
    </script>
   
</body>
</html>